<template>
	<view class="zone">
		<Header title="玩法说明"></Header>

		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<image src="http://image.qxgm.site/tdz/img/mozun/explain.png" mode="widthFix"></image>
				<image src="http://image.qxgm.site/tdz/img/mozun/lichneg.png" mode="widthFix"></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		height: calc(100vh - 80px);
		margin-top: 10px;
		image {
			width: 100%;
		}

	.ping1 {
		width: 100%;
		display: flex;
	}

		.yun {
			position: absolute;
			top: -3%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.box {
			background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
			background-size: 100% auto;
			padding: 10px 6px 10px;
		}
	}
</style>